<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>综合练习</title>
    <style>
        ul,li{margin: 0; padding: 0; list-style: none;}
        body{margin: 0}
        body>div{
            width: 400px;
            height: 300px;
            background-color: #e8e8e8;
        }
        #main{
            width: 400px;
            height: 40px;
            color: white;
            line-height: 40px;
            background-color: #0aa1ed;
            border-radius: 5px;
        }
        #main>img{
            position: relative;
            left: 10px;
            top: 5px;
        }
        #main>span{
            margin-left: 15px;
        }
        .info{
            color: #13a4ec;
            margin-left: 10px;
        }
        .info li {
            float: left;

        }
        /*选择父元素下指定的子元素 n从0开始*/
        /*下文就是选择第几个li标签*/
        li:nth-child(n+2){
            margin-left: 20px;
        }
        .info ul{
            height: 20px;
        }
        .info li a{
            text-decoration: none;
            color: cornflowerblue;
        }
    </style>
</head>
<body>
<div>
    <div id="main">
        <img src="pc2.png" alt="" width="30px">
        <span>电脑,办公/1F</span>
    </div>
    <div class="info">
        <p>电脑整机</p>
        <ul>
            <li><a href="">笔记本</a></li>
            <li><a href="">游戏机</a></li>
            <li><a href="">台式机</a></li>
            <li><a href="">一体机</a></li>
            <li><a href="">服务器</a></li>
            <li><a href="">联想</a></li>
        </ul>
    </div>
    <div class="info">
        <p>电脑整机</p>
        <ul>
            <li><a href="">CPU</a></li>
            <li><a href="">SSD硬盘</a></li>
            <li><a href="">显示器</a></li>
            <li><a href="">显卡</a></li>
            <li><a href="">组装电脑</a></li>
            <li><a href="">机箱</a></li>
        </ul>
    </div>
    <div class="info">
        <p>电脑整机</p>
        <ul>
            <li><a href="">硬盘</a></li>
            <li><a href="">鼠标</a></li>
            <li><a href="">U盘</a></li>
            <li><a href="">移动硬盘</a></li>
            <li><a href="">游戏设备</a></li>
            <li><a href="">智能单车</a></li>
        </ul>
    </div>
</div>
</body>
</html>